<template>
  <div>
    <el-form-item label="面板标题">
      <el-input v-model="localData.drawerTitle" clearable placeholder="请输入标题" />
    </el-form-item>
    <el-form-item label="展示页面">
      <el-select v-model="localData.targetPageId" filterable clearable>
        <el-option v-for="page in pageOptions" :key="page.pageId" :label="page.pageName" :value="page.pageId" />
      </el-select>
    </el-form-item>
    <el-form-item label="点击外部关闭">
      <el-switch v-model="localData.closeOnClickModal" />
    </el-form-item>
    <el-form-item label="显示按钮">
      <el-checkbox v-model="localData.showSubmit">提交</el-checkbox>
      <el-checkbox v-model="localData.showCancel">取消</el-checkbox>
      <el-checkbox v-model="localData.showClose">右上关闭</el-checkbox>
    </el-form-item>
    <el-form-item label="提交按钮配置">
      <customBtnSetting text="配置" :options="formJson" :formModelDataFromDesign="formModelDataFromDesign" :value="localData.submitBtn" @submit="submit" />
    </el-form-item>
    <el-form-item label="取消按钮文字">
      <el-input v-model="localData.cancelText" />
    </el-form-item>
    <el-form-item label="面板宽度">
      <el-input v-model="localData.size" placeholder="数值表示固定宽度,xx%表示百分比" />
    </el-form-item>
    <el-form-item label="打开方向">
      <el-radio-group v-model="localData.direction">
        <el-radio-button label="从右到左" value="rtl" />
        <el-radio-button label="从左到右" value="ltr" />
        <el-radio-button label="从上到下" value="ttb" />
        <el-radio-button label="从下到上" value="btt" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="打开延迟">
      <el-input-number v-model="localData.openDelay" controls-position="right">
        <template #suffix>
          <span>毫秒</span>
        </template>
      </el-input-number>
    </el-form-item>
    <el-form-item label="关闭延迟">
      <el-input-number v-model="localData.closeDelay" controls-position="right">
        <template #suffix>
          <span>毫秒</span>
        </template>
      </el-input-number>
    </el-form-item>
    <el-form-item label="关闭前钩子">
      <el-select v-model="localData.beforeClose" clearable>
        <el-option v-for="opt in getPageFuncs()" :key="opt.funcName" :label="opt.funcLabel" :value="opt.funcName" />
      </el-select>
    </el-form-item>
  </div>
</template>

<script>
import customBtnSetting from '../customButton/customBtnSetting.vue';
import { searchPages } from '@code/components/anvil-code-low-common/api/page';
import btnConfig from '../customButton/customButtonAttr';
import { randomString } from '@/utils/zmids';
import { generateValidUuid } from '@code/components/anvil-code-low-common/utils/common-methods'
import { cloneDeep } from 'lodash-es'

export default {
  name: 'AnvilDrawerConfig',
  components: { customBtnSetting },
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    formJson: {
      type: Object,
      default: () => {}
    },
    formModelDataFromDesign: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      localData: {},
      pageOptions: []
    };
  },
  computed: {
    fields() {
      return this.getCallableCompList(this.formJson);
    }
  },
  watch: {
    data: {
      handler(newVal) {
        if (newVal) {
          this.localData = newVal;
          this.init();
        }
      },
      deep: true,
      immediate: true
    },
    localData: {
      handler(newVal) {
        this.$emit('update:data', newVal);
      },
      deep: true
    }
  },
  created() {
    this.searchPageList();
  },
  methods: {
    searchPageList() {
      return searchPages().then((res) => {
        this.pageOptions = res.data;
      });
    },
    getPageFuncs() {
      return this.formJson.funcs ?? [];
    },
    submit(data) {
      this.localData.submitBtn = data;
    },
    // 初始化按钮配置
    init() {
      if (this.localData && (!this.localData.submitBtn || !Object.keys(this.localData.submitBtn).length)) {
        const submitConfig = {
          ...cloneDeep(btnConfig),
          uuid: generateValidUuid(),
          buttonName: '提交'
        };
        this.localData.submitBtn = submitConfig;
      }
    }
  }
};
</script>
